<template>
  <div class="chart" id="chart"></div>
</template>

<script>
import rawData from './data.js'
console.log(222, rawData)
export default {
  data () {
    return {
      upColor: '#00da3c',
      downColor: '#ec0000'
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      const myChart = this.$echarts.init(document.getElementById('chart'));
      const data = rawData
      console.log(123, data)
      const option = {
        textStyle: {
          color: '#fff'
        },
        animation: false,
        title: {
          text: ['上证指数'],
          padding: [20, 20, 100, 50],
          textStyle: {
            color: 'rgb(148, 191, 241)',
            fontSize: 24
          }
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['K线', 'MA5', 'MA10', 'MA20', 'MA30']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          borderWidth: 1,
          borderColor: '#ccc',
          padding: 10,
          textStyle: {
            color: '#000'
          },
          position: function (pos, params, el, elRect, size) {
            const obj = {
              top: 10
            };
            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
            return obj;
          }
        // extraCssText: 'width: 170px'
        },
        axisPointer: {
          link: [
            {
              xAxisIndex: 'all'
            }
          ],
          label: {
            backgroundColor: '#777'
          }
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: false
            },
            brush: {
              type: ['lineX', 'clear']
            }
          }
        },
        brush: {
          xAxisIndex: 'all',
          brushLink: 'all',
          outOfBrush: {
            colorAlpha: 0.1
          }
        },
        visualMap: {
          show: false,
          seriesIndex: 5,
          dimension: 2,
          pieces: [
            {
              value: 1,
              color: this.downColor
            },
            {
              value: -1,
              color: this.upColor
            }
          ]
        },
        grid: [
          {
            left: '10%',
            right: '8%',
            height: '50%'
          },
          {
            left: '10%',
            right: '8%',
            top: '63%',
            height: '16%'
          }
        ],
        xAxis: [
          {
            show: true,
            type: 'category',
            data: data.categoryData,
            boundaryGap: false,
            axisLine: { onZero: false },
            splitLine: { show: false },
            min: 'dataMin',
            max: 'dataMax',
            axisPointer: {
              z: 100
            }
          },
          {
            type: 'category',
            gridIndex: 1,
            data: data.categoryData,
            boundaryGap: false,
            axisLine: { onZero: false },
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: { show: false },
            min: 'dataMin',
            max: 'dataMax'
          }
        ],
        yAxis: [
          {
            scale: true,
            boundaryGap: false,
            show: true
          },
          {
            scale: true,
            gridIndex: 1,
            splitNumber: 2,
            axisLabel: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false }
          }
        ],
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0, 1],
            start: 98,
            end: 100
          },
          {
            show: true,
            xAxisIndex: [0, 1],
            type: 'slider',
            top: '85%',
            start: 98,
            end: 100
          }
        ],
        series: [
          {
            name: 'K线',
            type: 'candlestick',
            data: data.values,
            itemStyle: {
              color: this.upColor,
              color0: this.downColor,
              borderColor: undefined,
              borderColor0: undefined
            },
            tooltip: {
              formatter: function (param) {
                param = param[0];
                return [
                  'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
                  'Open: ' + param.data[0] + '<br/>',
                  'Close: ' + param.data[1] + '<br/>',
                  'Lowest: ' + param.data[2] + '<br/>',
                  'Highest: ' + param.data[3] + '<br/>'
                ].join('');
              }
            }
          },
          {
            name: 'MA5',
            type: 'line',
            data: this.calculateMA(5, data),
            smooth: true,
            lineStyle: {
              opacity: 0.5
            }
          },
          {
            name: '',
            type: 'line',
            smooth: true,
            lineStyle: {
              opacity: 0.5
            }
          },
          {
            name: '',
            type: 'line',
            smooth: true,
            lineStyle: {
              opacity: 0.5
            }
          },
          {
            name: '',
            type: 'line',
            smooth: true,
            lineStyle: {
              opacity: 0.5
            }
          },
          {
            name: 'Volume',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data.volumes
          }
        ]
      }
      console.log(34333, option)
      myChart.setOption(
        option,
        true
      );
    },
    // splitData (rawData) {
    //   const categoryData = [];
    //   const values = [];
    //   const volumes = [];
    //   for (let i = 0; i < rawData.length; i++) {
    //     categoryData.push(rawData[i].splice(0, 1)[0]);
    //     values.push(rawData[i]);
    //     volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
    //   }
    //   return {
    //     categoryData: categoryData,
    //     values: values,
    //     volumes: volumes
    //   };
    // },
    splitData (rawData) {
      const categoryData = [];
      const values = [];
      const volumes = [];
      for (let i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i]);
        volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
      }
      return {
        categoryData: categoryData,
        values: values,
        volumes: volumes
      };
    },
    calculateMA (dayCount, data) {
      const result = [];
      for (let i = 0, len = data.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push('-');
          continue;
        }
        let sum = 0;
        for (let j = 0; j < dayCount; j++) {
          sum += data.values[i - j][1];
        }
        result.push(+(sum / dayCount).toFixed(3));
      }
      return result;
    }
  }
}
</script>

<style lang="less" scoped>
.chart {
    width: 1000px;
    height: 500px;
    margin: auto;
    border-image-source: url(../../../assets/img/border-121-0f05f2ce15011b2a.png);
    border-width: 14px;
    border-image-slice: 14 fill;
    border-style: solid;
    background-clip: padding-box;
    filter: blur(0px);
    box-sizing: border-box;
}
</style>